<template>
  <div class="form-section">
    <el-row :gutter="20">
      <!-- 表格显示 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.grid_visible', '显示字段')"
          prop="config.grid_visible"
          tooltipContent="此设置立即生效"
        >
          <el-select
            v-model="modelValue.config.grid_visible"
            :placeholder="$p('menu.dev.field.field.grid_visible', '显示字段')"
            :style="commonInputStyle"
          >
            <el-option label="居左" value="left" />
            <el-option label="居中" value="center" />
            <el-option label="居右" value="right" />
            <el-option label="隐藏" value="hidden" />
            <el-option label="不显示" value="disable" />
          </el-select>
        </el-form-item-plus>
      </el-col>

      <!-- 表格渲染方式 -->
      <el-col :xs="xs" :sm="sm" :md="md" v-if="showGridConfig">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.grid_render', '显示方式')"
          prop="config.grid_render"
        >
          <el-radio-group
            v-model="modelValue.config.grid_render"
            :style="commonInputStyle"
          >
            <el-radio value="value">绑定值</el-radio>
            <el-radio value="tag" :disabled="!requiredTag">标签</el-radio>
            <!-- <el-radio value="custom" disabled>自定义</el-radio> -->
          </el-radio-group>
        </el-form-item-plus>
      </el-col>

      <!-- 表格宽度 -->
      <el-col :xs="xs" :sm="sm" :md="md" v-if="showGridConfig">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.grid_width', '列宽')"
          prop="config.grid_width"
          tooltipContent="此设置立即生效"
        >
          <el-input
            :style="commonInputStyle"
            :placeholder="$p('menu.dev.field.field.grid_width', '列宽')"
            v-model="modelValue.config.grid_width"
          />
        </el-form-item-plus>
      </el-col>
    </el-row>

    <el-row :gutter="20" v-if="showGridConfig">
      <!-- 表格排序 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.grid_sortable', '允许排序')"
          prop="config.grid_sortable"
        >
          <el-radio-group
            v-model="modelValue.config.grid_sortable"
            :style="commonInputStyle"
          >
            <el-radio :value="true">排序</el-radio>
            <el-radio :value="false">禁止</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>

      <!-- 表格筛选 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.grid_filterable', '允许筛选')"
          prop="config.grid_filterable"
        >
          <el-radio-group
            v-model="modelValue.config.grid_filterable"
            :style="commonInputStyle"
            :disabled="!showFilterConfig"
          >
            <el-radio :value="true">筛选</el-radio>
            <el-radio :value="false">禁止</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>

      <!-- 表格编辑 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.grid_editable', '允许编辑')"
          prop="config.grid_editable"
        >
          <el-radio-group
            v-model="modelValue.config.grid_editable"
            :style="commonInputStyle"
            :disabled="!showEditableConfig"
          >
            <el-radio :value="true">编辑</el-radio>
            <el-radio :value="false">禁止</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="showGridConfig">
      <!-- Token渲染 -->
      <el-col v-if="showTokenRender" :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.grid_token_render', '显示字段')"
          prop="config.grid_token_render"
        >
          <el-select
            v-model="modelValue.config.grid_token_render"
            :placeholder="
              $p('menu.dev.field.field.grid_token_render', '显示字段')
            "
            :style="commonInputStyle"
          >
            <el-option label="用户编号" value="id" />
            <el-option label="用户名" value="username" />
            <el-option label="昵称" value="nickname" />
            <el-option label="姓名" value="realname" />
          </el-select>
        </el-form-item-plus>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';
import { useRoute } from 'vue-router';

const xs = 24;
const sm = 12;
const md = 8;

// 当前路由对象
const route = useRoute();

// Props定义
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  commonInputStyle: {
    type: Object,
    default: () => ({ minWidth: '220px' }),
  },
});

// 事件定义
const emit = defineEmits(['update:modelValue']);

// 计算属性
const requiredTag = computed(() => {
  return [
    'select',
    'radio',
    'checkbox',
    'switch',
    'transfer',
    'tree-select',
  ].includes(props.modelValue.config.type);
});

const showGridConfig = computed(() => {
  return (
    props.modelValue.config.grid_visible !== 'disable' &&
    route.query.app === 'admin' &&
    !['disabled'].includes(props.modelValue.config.grid_visible)
  );
});

const showTokenRender = computed(() => {
  return props.modelValue.config.type === 'token_value';
});

const allFieldTypes = [
  'input',
  'select',
  'textarea',
  'radio',
  'checkbox',
  'switch',
  'transfer',
  'datetime',
  'date_range',
  'image_upload',
  'file_upload',
  'input_number',
  'input_tag',
  'slider',
  'color_picker',
  'key_value',
  'ssq_select',
  'location_select',
  'rich_text_editor',
  'list_select',
  'password',
  'token_value',
  'random',
  'order_sn',
  'client_ip',
  'tree_select',
];

const editableFieldTypes = [
  'input',
  'select',
  'textarea',
  'radio',
  'checkbox',
  'switch',
  'transfer',
  'datetime',
  'input_number',
  'tree_select',
];

const showEditableConfig = computed(() => {
  return editableFieldTypes.includes(props.modelValue.config.type);
});

const filterableFieldTypes = [
  'input',
  'select',
  'textarea',
  'radio',
  'checkbox',
  'switch',
  'transfer',
  'datetime',
  'input_number',
  'tree_select',
];

const showFilterConfig = computed(() => {
  if (
    ['input', 'textarea', 'datetime', 'input_number'].includes(
      props.modelValue.config.type,
    )
  ) {
    return true;
  }
  if (
    ['select', 'radio', 'checkbox', 'transfer', 'tree_select'].includes(
      props.modelValue.config.type,
    ) &&
    props.modelValue.config.item_options_type !== 'dict'
  ) {
    return true;
  }
});
</script>

<style lang="scss" scoped></style>
